import React, { useState } from "react";
import { TFunction } from "i18next";
import ButtonAtom from "../../UI_KIT/Atoms/Button.Atom";
import ButtonAtomEnum from "../../UI_KIT/Atoms/Button.Atom/enum";
import Link from "next/link";
import CheckBox from "../../UI_KIT/Atoms/CheckBox.Atom";
import { CheckboxAtomEnum } from "../../UI_KIT/Atoms/CheckBox.Atom/enum";
import TextAtom from "../../UI_KIT/Atoms/Text.Atom";
import TextAtomEnum from "../../UI_KIT/Atoms/Text.Atom/enum";

interface PlacingOrderProps {
  t: TFunction;
}

const PlacingOrder: React.FC<PlacingOrderProps> = (props) => {
  const { t } = props;
  const placingOrderItemsSum = t("CheckoutPage.PlacingOrder.SumControl", {
    returnObjects: true,
  }) as [];
  const placingOrderItemsPayMethod = t(
    "CheckoutPage.PlacingOrder.PaymentMethod",
    {
      returnObjects: true,
    }
  ) as [];

  const [selectedOption, setSelectedOption] = useState("");
  const [sum, setSum] = useState(0);
  const [delivery, setDelivery] = useState(0);
  const [promo, setPromo] = useState(0);

  const handleOptionChange = (option: string) => {
    setSelectedOption(option);
  };

  return (
    <>
      <TextAtom
        type={TextAtomEnum.enum_h6}
        className="font-bold text-textColor"
      >
        {t("CheckoutPage.PlacingOrder.textTotal")}:
      </TextAtom>
      <div className="flex flex-col gap-2">
        <div className="flex justify-between">
          <TextAtom
            type={TextAtomEnum.enum_h3}
            className="font-bold text-textColor"
          >
            {t("CheckoutPage.PlacingOrder.sumTotal")}:
          </TextAtom>
          <TextAtom type={TextAtomEnum.enum_h3} className="text-tiffany">
            $Total
          </TextAtom>
        </div>

        {placingOrderItemsSum.map((control, index) => (
          <div className="flex justify-between" key={index}>
            <TextAtom
              type={TextAtomEnum.enum_h5}
              className="text-textColor font-regular"
            >
              {control}
            </TextAtom>
            <TextAtom
              type={TextAtomEnum.enum_h5}
              className="text-textColor font-regular"
            >
              ${index === 0 ? sum : index === 1 ? delivery : promo}
            </TextAtom>
          </div>
        ))}
        <ButtonAtom className="mt-3" type={ButtonAtomEnum.enum_butButton}>
          {t("CheckoutPage.PlacingOrder.submit")}:
        </ButtonAtom>
        <TextAtom
          type={TextAtomEnum.enum_h5}
          className="font-medium text-textColor leading-[125%]"
        >
          {t("CheckoutPage.PlacingOrder.textPrivacy")}: <br />
          <Link
            href="/privacy"
            className="font-medium text-textColor hover:text-bg_hover"
          >
            {t("CheckoutPage.PlacingOrder.textPrivacyLink")}
          </Link>
        </TextAtom>
        <TextAtom
          type={TextAtomEnum.enum_h4}
          className="mt-4 mb-1 font-regular text-textColor"
        >
          {t("CheckoutPage.PlacingOrder.paymentTitle")}:
        </TextAtom>
        {placingOrderItemsPayMethod.map((option, index) => (
          <div className="flex gap-3 items-center" key={index}>
            <CheckBox
              type={CheckboxAtomEnum.RADIO}
              checked={selectedOption === option}
              onChange={() => handleOptionChange(option)}
            />
            <TextAtom
              type={TextAtomEnum.enum_h5}
              className="font-regular text-textColor"
            >
              {option}
            </TextAtom>
          </div>
        ))}
      </div>
    </>
  );
};
export default React.memo(PlacingOrder);
